<template>
	<view class="studyRecord padding">
		<!-- <view class="editing margin-bottom text-right margin-right-lg">
			<text class="text-lg">编辑</text>	
		</view> -->
		<view class="cu-list menu-avatar">
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in myClassList" :key="item.id"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index" @click="gotovideodetail(item.id)">
				<image :src="item.image_url" mode="" style="width: 100rpx;height: 100rpx;position: absolute;left: 44rpx;margin: auto;border-radius: 16rpx;"></image>
				<view class="content">
					<view class="text-grey">{{item.name}}</view>
					<view class="text-cut">
						<text class="text-green margin-right-xs text-sm">{{item.desc}}</text>
					</view>
				</view>
				<view class="move">
					<view class="bg-red" @click="deleteClass(item.id)">删除</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				modalName: null,
				myClassList:[],
				listTouchStart: 0,
			}
		},
		onLoad() {
			this.getJoinAlready()
		},
		methods:{
			gotovideodetail(id){
				uni.navigateTo({
				    url: `../videodetail/videodetail?id=${id}`
				});
			},
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			async getJoinAlready(){
				let res = await this.$myRuquest({
					url:'/my_history_course/'
				})
				this.myClassList = res.data.results
			},
			deleteClass(id){
				this.$myRuquest({
					url:'/delete_history_course/',
					method:'POST',
					data:{course_id:id}
				}).then(res=>{
					this.getJoinAlready()
				})
			}
		}
	}
</script>

<style lang="scss">
.studyRecord{
	
}
</style>
